<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		<!-- 基础公有css -->
		<link rel="stylesheet" href="css/index.css" />
		
		<link rel="stylesheet" href="css/result.css" />
		<link rel="stylesheet" href="css/setting.css" />
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">推广返利</span>
					<span class="nav-item">推广设置</span>
				</div>

				<ul class="notice-wrapper">
					<li class="notice-item">说明：说明：客户通过您的推广链接注册/登录衡天云，即可与您建立关联订单。</li>
				</ul>

				<div class="form-wrapper">
					<!-- 这里不能删除  这里是为了复制 -->
					<input id="hideInput" type="text"/>
					<div class="from-title-wrapper">
						<span class="from-title">
							推广设置
						</span>
					</div>
					<div class="content-wrapper">
						<span class="content-title">自定义链接</span>
						<div class="content-inner">
							<div class="content-inner-item  fboxRow  mb-20">
								<span class="item-title">专属链接：</span>
								<div class="input-Text  mr-20">
									{{customlinkInfo.linkAddress}}
								</div>
								<div @click="copylinkAddress(customlinkInfo.linkAddress)" class="yzButton">
									复制链接
								</div>
							</div>
							<div class="content-inner-item  fboxRow">
								<span class="item-title">跳转页面：</span>
								<el-input :disabled="!isEditcustomRedirectPage" class="mr-20" v-model="customlinkInfo.redirectPage"></el-input>
								<div @click="changeEditLinkStatus" class="yzButton">
									 {{isEditcustomRedirectPage? '保存' : '修改'}} 
								</div>
							</div>
							
						</div>
					</div>
					<div class="content-wrapper  matter-wrapper">
						<span class="content-title">常用推广素材</span>
						<div v-for="(item,index) in matterListInfo" :key="index" class="content-inner  fboxRow">
							<img class="mr-20" width="280" :src="item.imgsrc" />
							<div class="content-inner-item-parent">
								<div class="content-inner-item  fboxRow  mb-20">
									<div class="input-Text  mr-20">
										{{item.linksrc}}
									</div>
									<div @click="copylinkAddress(item.linksrc)" class="yzButton">
										复制链接
									</div>
								</div>
								<div class="content-inner-item  fboxRow">
									<div class="input-Text  mr-20">
										{{item.promotesrc}}
									</div>
									<div @click="copylinkAddress(item.promotesrc)" class="yzButton">
										复制推广
									</div>
								</div>
								<div @click="handclickdowonloadImg(item)" class="downloadIImg yzButton">
									下载推广图片包
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						customlinkInfo: { // 自定义链接
							linkAddress:'https://www.htstack.com/activity/202103.shtml',
							redirectPage: 'https://www.htstack.com/'			
						},
						isEditcustomRedirectPage: false , //  是否可以修改自定义跳转页面
						matterListInfo:[{   // 常用素材数组
							imgsrc:'https://www.henghost.com/assets/activity-page/202103/newImg/newUser_banner_mainPicture.png',
							linksrc: 'https://www.htstack.com/activity/202103.shtml', //  链接
							promotesrc:'【衡天云】五一放价  换新出海，限量爆款  香港服务器  低至499元/月' // 推广地址
						},{   // 常用素材数组
							imgsrc:'https://www.henghost.com/assets/activity-page/202103/newImg/newUser_banner_mainPicture.png',
							linksrc: 'https://www.htstack.com/activity/202104.shtml', //  链接
							promotesrc:'【衡天云】六一放血  换新出海，限量爆款  香港服务器  低至999元/月' // 推广地址
						}],
					}
				},

				methods: {
					// 复制链接    复制推广，复制链接都公用这个方法
					copylinkAddress: _throttle(function(val) {
							// 这里是借助隐藏的表单  去实现复制功能
							$('#hideInput').val(val)
							$('#hideInput').select()
							let state
							try{
								state = document.execCommand("copy")
							}catch(e){
								//TODO handle the exception
								state =  false
							}
							if(state) {
								this.$message.success('复制成功')
							}else {
								this.$message.error('复制失败')
							}
							
					}) ,
					// 点击下载图片
					handclickdowonloadImg:_throttle(function(item) {
						console.log(item)
						console.log('下载推广图片包')
					}),
					
					
					// 改变是否可以编辑自定义跳转页面
					changeEditLinkStatus: _throttle(function() {
						
						if(!this.isEditcustomRedirectPage) {
							// 点击修改
							
						}else  {
							// 点击保存
							// 目前的规则是必须以https://www.htstack.com 开头
							if(this.customlinkInfo.redirectPage.indexOf('https://www.htstack.com') !== 0) {
								console.log('跳转页面有问题')
								this.$message.error('请填写正确的跳转页面url地址！')
								return
							}else {
								this.$message.success('修改跳转页面地址成功！')
							}
						}
						this.isEditcustomRedirectPage = !this.isEditcustomRedirectPage
					},200),


					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},
				},
				mounted: function() {

				}

			})
		</script>
	</body>
</html>
